<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}
			
			input {
				width: 100px;
				height: 30px;
				float: left;
				background: mediumvioletred;
				text-align: center;
				line-height: 30px;
				color: #fff;
				cursor: pointer;
				outline: none;
				border: none;
			}
			
			.clearfix:after {
				display: block;
				content: '';
				clear: both;
			}
			
			ul {
				clear: both;
			}
			
			li {
				width: 400px;
				height: 100px;
				background: green;
				color: red;
				font-size: 26px;
				text-align: center;
				line-height: 100px;
				display: none;
			}
			
			.show {
				display: block;
			}
			
			.active {
				background: orangered;
			}
		</style>
	</head>

	<body>
		<div id="div1">
			<input type="button" value="1" / class="active">
			<input type="button" value="2" />
			<input type="button" value="3" />
			<input type="button" value="4" />
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ul>
		</div>

	</body>
	<script>
		
		function Tab() {
			var oDiv = document.getElementById('div1');
			this.aBtn = oDiv.getElementsByTagName('input');
			this.aDiv = oDiv.getElementsByTagName('li');
			this.aDiv[0].style.display = 'block';
			var _this = this;
			for(var i = 0; i < this.aBtn.length; i++) {
				this.aBtn[i].index = i;
				this.aBtn[i].onclick = function() {
					_this.tab(this);
				}
			}
		}
		Tab.prototype.tab = function(oBtn) {
			for(var i = 0; i < this.aBtn.length; i++) {
				this.aBtn[i].className = '';
				this.aDiv[i].style.display = 'none';	
			}
			oBtn.className = 'active';
			this.aDiv[oBtn.index].style.display = 'block';
		}
		var oTab = new Tab()
	</script>

</html>